<template>
	<div class="login">
		<div class="login_header"></div>
		<div id="pages">
			<div class="q-skin">
				<ul>
					<li class="red"></li>
					<li class="bland"></li>
				</ul>
			</div>
			<div class="content">
				<div class="logo"><img class="imgclick" src="../images/yundilogo_1.png" />
					<label class="yundiclick" style="position:absolute;bottom: 20px; left:0px;width:100%;text-align:center;display:none;">
          <font class="font1" style="color: gainsboro;">
            SPC410B040.20161205a
          </font>
        </label>
				</div>
				<div class="right">
					<div class="form v2016-3-25">
						<p class="input01">
							<input class="txt" type="text" v-model="userName" maxlength="20" placeholder="请输入手机号/账号" />
						</p>
						<p class="input02"><span class="username">
              <input class="txt" v-model="passWord" placeholder="请输入密码" type="password" maxlength="16"/>
            </span></p>
						<input @click="submit" value="登录" type="button" class="button_01" />
						<div class="find">
							<div class="hint" v-text="messages"></div>
							<a href='/basis/RetrievePassword.html'>忘记密码</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'login',
		data() {
			return {
				userName: "",
				passWord: "",
				messages: ""
			}
		},
	    mounted () {
	      const self = this;
	      window.onkeyup = function (event) {
	        if(event && event.keyCode==13){
	          self.submit();
	        }
	      }
	    },
		methods: {
			submit() {
				if(this.userName == '') {
					this.messages = "*用户名不能为空*";
					return false;
				}
				if(this.passWord == '') {
					this.messages = "*密码不能为空*";
					return false;
				}
				if(this.userName != '' && this.passWord != '') {
					this.tosubmit();
				}
			},
			tosubmit() {
				let params = Tools.Nformat("username={0}&password={1}",this.userName,this.passWord);
				let url = Tools.Nformat("{0}{1}?{2}",URLS.base,URLS.loginUrl,params);
				this.$http.get(url).then(function(data){
          let dataBody = data.body;
          if(!!dataBody.sybData[0]){
            if(data != null && dataBody.sybData[0].token != null){
              if(!!dataBody.sybData[0].user){
                sessionStorage.token = dataBody.sybData[0].token;
                sessionStorage.setItem("user",JSON.stringify(dataBody.sybData[0].user));
                this.$router.push("/index");
              }
            }
          }else{
            this.messages = "*用户名或密码错误！*";
            return false;
          }
			  })
			}
		}
	}
</script>

<style scoped>
	::-ms-clear {
		display: none;
	}

	 ::-ms-reveal {
		display: none;
	}

	.q-skin {
		position: absolute;
		right: 20px;
		top: 0px;
		z-index: 9;
	}

	.q-skin ul {
		overflow: hidden
	}

	.q-skin ul li {
		width: 70px;
		height: 30px;
		line-height: 30px;
		float: left;
		margin-left: 10px;
		background: rgba(176, 232, 226, 0.62);
		list-style: none;
		color: #D3F3EF;
		cursor: pointer;
	}

	.q-skin .bland {
		background: bland;
	}

	@import "../css/login.css";
</style>
